<template>
  <div class="add-social">
    <div class="between">
      <span class="label text-white font-size-14 font-style-normal font-weight-500 line-height-140">
        <Icon v-if="prependIcon" class="mr-1" size="16" :name="prependIcon"></Icon>
        {{ props.label }}
      </span>
      <button @click="() => emit('click')">
        <Icon :name="appendIcon" size="17"></Icon>
      </button>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  label: {
    type: String,
    default: '新增社群连结',
  },
  appendIcon: {
    type: String,
    default: 'addNoShadow',
  },
  prependIcon: {
    type: String,
  },
})

const emit = defineEmits(['click'])
</script>
<style scoped lang="scss">
.add-social {
  display: flex;
  height: 2.5rem;
  padding: 0rem 1rem;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  align-self: stretch;

  border-radius: 0.625rem;
  background: var(--bg-dialog, #333546);

  .between {
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    align-self: stretch;
  }

  .label {
    // max-width: calc(17.875rem);
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
  }
}
</style>
